<template>
  <div class="login-box">
    <div class="login-head">
      <div>
        <img src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/wai-logo.png" class="logn-logo">
      </div>
    </div>
    <div class="login-body">
      <el-card class="login-form" shadow="never">
        <div class="total-type-msg">
          <span v-if="d_type == 1">
            <i class="el-icon-mobile-phone"></i>
            <span>扫码登录点这里</span>
          </span>
          <span v-else>
            <i class="el-icon-user-solid"></i>
            <span>账号登录点这里</span>
          </span>
        </div>
        <img
          @click="changeTotalType()"
          :src="d_type == 2 ? 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/login-pwd.png' : 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/login-qrcode.png'"
          class="login-type-cover"
        />
        <!-- <div class="total-type"></div> -->

        <!-- 账号登录 -->
        <div v-if="d_type == 1" style="margin-top:70px;">
          <div>
            <div class="login-type">
              <div :class="login_type == 1 ? 'active' : ''" @click="changeLoginType(1)">密码登录</div>
              <div :class="login_type == 2 ? 'active' : ''" @click="changeLoginType(2)">快捷登录</div>
              <div class="login-type-line"></div>
            </div>
            <div class="login-type-form" v-if="login_type == 1">
              <el-form>
                <el-form-item>
                  <el-input
                    placeholder="请输入手机号"
                    prefix-icon="el-icon-user"
                    class="input-form"
                    v-model="mobile"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input
                    placeholder="请输入密码"
                    prefix-icon="el-icon-lock"
                    class="input-form"
                    type="password"
                    v-model="password"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button class="com-btn login-btn" @click="padLogin()">登录</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="login-type-form" v-if="login_type == 2">
              <el-form>
                <el-form-item>
                  <el-input placeholder="请输入手机号" prefix-icon="el-icon-user" v-model="mobole"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input
                    placeholder="请输入短信验证码"
                    prefix-icon="el-icon-mobile-phone"
                    v-model="code"
                  >
                    <template slot="append">
                      <span @click="getCode()">{{second > 0 ? second+'秒再获取' : '获取验证码'}}</span>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button class="com-btn login-btn">登录</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div v-else style="margin-top:40px;">
          <div class="qr-title">手机扫码登录</div>

          <div class="qr-box">
            <div class="qr-box-model" @mouseover="overQr" @mouseout="outQr"></div>
            <div
              class="qr-src"
              id="qrcode"
              ref="qrCodeDiv"
              :style="'margin-left:'+qr_left+'px'"
              @mousemove.stop
            ></div>
            <img
              v-if="img_show"
              src="https://img-qn.hudongba.com/static_v4/images/other/sweep_code_landing_bg.jpg"
            />
          </div>
          <div class="qr-txt">
            打开最新版
            <span>一块跑APP</span>
            扫一扫即可登录
          </div>
        </div>
        <el-divider content-position="center">
          <span style="color:#aaa;font-size:12px">其它方式登录</span>
        </el-divider>
        <div class="login-other">
          <i class="iconfont icon-icon weixin-icon"></i>
        </div>
      </el-card>
    </div>
    <!-- 登录框 -->
  </div>
</template>

<script>
import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      d_type: 1,
      login_type: 1,
      second: 0,
      qr_left: 94,
      img_show: false,
      mobile: "",
      password: "",
      code: ""
    };
  },
  mounted() {
    if (this.d_type == 2) {
      setTimeout(() => {
        this.productQrcode();
      });
      setTimeout(() => {
        this.qr_left = 0;
      }, 500);
    }
  },
  methods: {
    //账户密码登录
    padLogin() {
      if (!this.mobile) return this.toast(0, "请输入手机号码");
      if (!this.password) return this.toast(0, "请输入登录密码");
      this.ajaxs("login/pwdLogin", {
        data: { mobile: this.mobile, password: this.password },
        success: res => {
          var msg = res.code ? '登录成功' : res.msg;
          this.toast(res.code, msg);
          if (res.code) {
            window.localStorage.setItem('user_info',JSON.stringify(res.msg.user));
            window.localStorage.setItem('cation',JSON.stringify(res.msg.cation));
            setTimeout(() => {
              this.$router.push({
                path: "/manage/index/index"
              });
              this.$parent.is_login = 2;
            }, 1000);
          }
        }
      });
    },
    overQr() {
      this.qr_left = 0;
    },
    outQr() {
      this.qr_left = 94;
      this.img_show = false;
    },
    //生成二维码
    productQrcode() {
      new QRCode(this.$refs.qrCodeDiv, {
        width: 170,
        height: 170,
        text: "https://www.baidu.com",
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.H //容错率，L/M/H
      });
    },
    changeTotalType() {
      this.d_type = this.d_type == 1 ? 2 : 1;
      if (this.d_type == 2) {
        setTimeout(() => {
          this.productQrcode();
          this.qr_left = 0;
        });
      } else {
        this.img_show = false;
        this.qr_left = 94;
      }
    },
    changeLoginType(e) {
      this.login_type = e;
    },
    //获取验证码
    getCode() {
      if (this.second == 0) {
        this.second = 60;
        var times = setInterval(() => {
          if (this.second > 0) this.second--;
          if (this.second == 0) {
            clearInterval(times);
          }
        }, 1000);
      }
    }
  },
  watch: {
    qr_left(v, o) {
      if (v == 0) {
        setTimeout(() => {
          this.img_show = true;
        }, 300);
      }
      console.log(1);
    }
  }
};
</script>

<style>
.logn-logo{
  height: 50px;
  margin-top: 15px;
}
.login-head {
  height: 80px;
  width: 100%;
}
.login-head > div {
  width: 1200px;
  margin: auto;
  height: 80px;
  line-height: 80px;
}
.login-body {
  background: url(https://ykp-new.oss-cn-hangzhou.aliyuncs.com/manage/b4bdfa5aeac2cc28b525ba67ba761e0.jpg);
  background-size: cover;
  width: 100%;
  height: calc(100% - 200px);
}
.qr-box {
  margin-top: 20px;
  overflow: hidden;
  height: 170px;
  position: relative;
}
.qr-box-model {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
}
.qr-box > img {
  float: left;
  width: 170px;
  height: 170px;
  margin-left: 18px;
}
.qr-txt {
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
}
.qr-txt > span {
  color: #8a70c6;
  cursor: pointer;
}
.qr-src {
  display: block;
  width: 170px;
  height: 170px;
  display: block;

  margin-left: 94px;
  margin-bottom: 0;
  transition: all 0.3s linear;
  float: left;
}
.qr-title {
  font-size: 16px;
  text-align: center;
  color: #000;
  font-weight: bold;
}
.login-type-cover {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}
.total-type-msg {
  position: absolute;
  width: 130px;
  height: 24px;
  background: url(https://ykp-new.oss-cn-hangzhou.aliyuncs.com/login-msg.png);
  top: 20px;
  right: 50px;
  line-height: 24px;
  font-size: 12px;
  padding-left: 10px;
  color: #8a70c6;
}
.total-type {
  overflow: hidden;
  height: 70px;
}
.login-type-form .el-input-group__append {
  background-color: #fff;
  font-size: 12px;
  color: #8a70c6;
  cursor: pointer;
}
.weixin-icon {
  font-size: 30px;
  line-height: 58px;
  color: #fff;
}
.login-other {
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #67c23a;
  border-radius: 50%;
  margin: auto;
  cursor: pointer;
}
.login-box {
  width: 100%;
  height: 100vh;
  background: #fff;
  position: relative;
}
.login-form {
  width: 400px;
  position: relative;
  float: right;
  margin-top: 100px;
  margin-right: 200px;
}
.login-type {
  overflow: hidden;
  position: relative;
}
.login-type > div {
  float: left;
  width: calc(50% - 30px);
  text-align: right;
  font-size: 16px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
}
.login-type > div.active {
  color: #8a70c6;
}
.login-type > div:nth-child(2) {
  margin-left: 60px;
  text-align: left;
}
.login-type > div.login-type-line {
  position: absolute;
  height: 21px;
  width: 1px;
  background: #aaa;
  top: 0;
  left: 50%;
}
.login-type-form {
  margin-top: 20px;
}
.login-btn {
  width: 100%;
}
</style>